import { ChartAreaInteractive } from "@/components/chart-area-interactive";
import { SectionCards } from "@/components/section-cards";

// // 示例快捷操作按钮组件
function QuickActions() {
  return (
    <div className="flex gap-2">
      <button className="btn btn-primary">新建报销</button>
      <button className="btn btn-secondary">发起审批</button>
      <button className="btn btn-outline">导出报表</button>
    </div>
  );
}

// 示例近期动态组件
function RecentActivities() {
  // 这里可替换为实际数据
  const activities = [
    { id: 1, content: "张三提交了报销申请", time: "10分钟前" },
    { id: 2, content: "李四审批了请假单", time: "30分钟前" },
    { id: 3, content: "系统发布了新公告", time: "1小时前" },
  ];
  return (
    <div className="bg-white rounded-lg shadow p-4 mt-4">
      <div className="font-semibold mb-2">近期动态</div>
      <ul className="space-y-1 text-sm text-gray-600">
        {activities.map(a => (
          <li key={a.id} className="flex justify-between">
            <span>{a.content}</span>
            <span className="text-xs text-gray-400">{a.time}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const DashboardOverviewPage = () => {
  return (
    <div className="flex flex-1 flex-col">
      <div className="@container/main flex h-[246px] flex-col gap-2">
        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
            <SectionCards />
            {/* <QuickActions /> */}
        </div>
      </div>
              <div className="@container/main flex flex-1 flex-col gap-2">
                <div className="flex flex-col lg:flex-row gap-4">
                  {/* <SectionCards /> */}
                  <div className="flex-1 bg-white rounded-lg shadow p-4">
                    <ChartAreaInteractive />
                  </div>
                  <div className="w-full lg:w-1/3">
                    <RecentActivities />
                  </div>
                </div>
            </div>
        </div>
  );
}

export default DashboardOverviewPage;